<template>
  <div  id="my-three">
      <div class="content bg" :class="{content01:typedata==8,content02:typedata==2,content03:typedata==4,content04:typedata==3}">
          <!-- //头部展示 -->
            <div class="headerImg" style="width:100%;height:8%">
                <div class="color01 back cursor dis_center" @click="backSystem"><span class="back-cion"></span> 返回</div>
                <div class="titlebox ">
                    <div class="buttonboxleft buttonbox flex">
                        <div class="size0 cursor" :class="{size00:typedata==1}" @click="changetype(1)">生产总览</div>
                        <div class="size0 cursor" :class="{size00:typedata==2}"  @click="changetype(2)">lpg生产</div>
                        <div class="size0 cursor" :class="{size00:typedata==3}" @click="changetype(3)">油品生产</div>
                        <div class="size0 cursor" :class="{size00:typedata==4}" @click="changetype(4)">散杂货生产</div>
                    </div>
                    <div class="buttonboxright buttonbox flex">
                        <div class="size0 cursor" :class="{size00:typedata==5}" @click="changetype(5)">安全总览</div>
                        <div class="size0 cursor" :class="{size00:typedata==6}" @click="changetype(6)">特殊作业</div>
                        <div class="size0 cursor" :class="{size00:typedata==7}" @click="changetype(7)">拖轮管控</div>
                        <div class="size0 cursor" :class="{size00:typedata==8}" @click="changetype(8)">子平台监控</div>
                    </div>
                </div>
                
            </div>
            <!-- 展示区域 -->
                <!-- 生产总览 -->
                <Production v-if="typedata==1"/>
                <Lpg v-if="typedata==2"/>
                <Oils v-if="typedata==3"/>
                <!-- 拖轮 -->
                
                <Tug v-if="typedata==7"/>

      </div>

  </div>
</template>
<script setup>
import { reactive,onBeforeMount,getCurrentInstance,onMounted, nextTick,onUpdated} from "vue";
import router from '@/router'
import store from '@/store'
const { proxy } = getCurrentInstance();
import { ref, onUnmounted } from 'vue';
import Lpg from './lpg.vue';
import Production from './production.vue';
import Oils from './oils.vue';

import Tug from './tug.vue';
const typedata = ref(1)
const changetype = (type)=>{
    typedata.value = type
}

</script>

<style lang='less' scoped>
#my-three{
.content{
    height: 100vh;
    width: 100%;
    background-image: url('@/assets/bgimg/04.png');
    background-size:100% 100% ;
}
.content01{
    height: 100vh;
    width: 100%;
    background-image: url('@/assets/img02/bg24.png') !important;
    background-size:100% 100% ;
}
.content02{
    height: 100vh;
    width: 100%;
    background-image: url('@/assets/bgimg/03.png') !important;
    background-size:100% 100% ;
}
.content03{
    height: 100vh;
    width: 100%;
    background-image: url('@/assets/bgimg/01.png') !important;
    background-size:100% 100% ;
}
.content04{
    height: 100vh;
    width: 100%;
    background-image: url('@/assets/bgimg/02.png') !important;
    background-size:100% 100% ;
}
.titlebox{
    width: 92%;
    height: 70%;
    display: flex;
    align-content: center;
    justify-content: space-between;
}
.buttonbox{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.size0{
    color: #00F0FF;
    font-size: 20px;
    padding:4px 16px;
    background-image: url('@/assets/img02/bg04.png');
    background-size:100% 100% ;
}
.size00{
    color: #FAC858 !important;
    font-size: 20px;
    padding: 4px 16px;
    background-image: url('@/assets/img02/bg03.png') !important;
    background-size:100% 100% ;
}
.headerImg{
    background-image: url('@/assets/img02/bg05.png');
    background-size: 100% 100%;
    position: relative;
    display: flex;
    .dataBox{
        height: 50%;
        width: 30%;
        // background-color: aqua;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        right: 1%;
        top: 0;
        .temperature{
            display: flex;
            align-items: center;
        }
        .temperature-cion{
            width: 25px;
            height: 25px;
            display: inline-block;
             background-size: 100% 100%;
            color: #FFFFFF;
        }
        .temperature-cion01{
            background-image: url('@/assets/img01/icon06.png');
        }
        .temperature-cion02{
            background-image: url('@/assets/img01/icon07.png');
        }
        .temperature-cion03{
            background-image: url('@/assets/img01/icon08.png');
        }
        .temperature-cion04{
            background-image: url('@/assets/img01/icon09.png');
        }
        .temperature-num{
            color: #FFFFFF;
            font-size:  calc(100vw *14/1920);;
        }
    }
    .split{
        width: 1px;
        height: 10px;                                                                                                                                          
        margin: 0 1%;
        background-color: rgba(255,255,255,0.24);
        // margin: 1%;
    }

}
.color01{
    color: #FFFFFF;
}
.back{
    // position: absolute;
    // left: 1%;
    // top: 4%;
    font-size: calc(100vw*14/1920);
    width: 4%;
    height: 70%;
}
.back-cion{
    width: calc(100vw *25/1920);
    height: calc(100vw *25/1920);
    display: inline-block;
    background-image: url('@/assets/img/icon05.png');
}
}
</style>

 